<template>
  <div class="home " >
    <img alt="Vue logo" src="../assets/logo.png">

    <div>
      <h2>欢迎光临红浪漫洗浴中心</h2>
      <div>请选择一位美女为你服务</div>
    </div>
    
    <!-- button -->
    <div>
      <button v-for="(item, index) in girls" :key="index" @click="selectGirlFun(index)">{{index}}:{{item}}</button>
    </div>
    <div>你选择了【{{selectGirl}}】为你服务</div>

  </div>
</template>

<script lang="ts">
import { 
  reactive, 
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated
  } from 'vue';
export default ({
  name: 'Home',
  setup () {
    console.log("1-开始创建组件----setup()");
    const data = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    onBeforeMount(() => {
      console.log("2-组件挂载到页面之前执行----onBeforeMount()");
    });

    onMounted(() => {
      console.log("3-组件挂载到页面之后执行----onMounted()");
    });

    onBeforeUpdate(() => {
      console.log("4-组件更新之前----onBeforeUpdate()");
    });

    onUpdated(() => {
      console.log("5-组件更新之后----onUpdated()");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    }
    
  }
});
</script>